<template>
	<div class="page bgc-eaf0f5">
		<mt-header title="运力招投标规则">
			<router-link to="" slot="left">
				<img class="back" :src="back" @click="$router.back(-1)" alt="">
			</router-link>
		</mt-header>
		<div class="img">
			<img class="state-img" v-for="(item, index) in list" :src="item.src" @click="show(index)">
			<div v-transfer-dom>
				<previewer :list="list" ref="previewer" :options="options" @on-index-change="logIndexChange"></previewer>
			</div>
		</div>
	</div>
</template>

<script>
	import { Previewer, TransferDom } from 'vux'
	export default {
	  name: 'bid-state',
	  directives: {
	    TransferDom
	  },
	  data() {
	    return {
	      back: require('@/assets/image/v1/bid/back@2x.png'),
	      list: [{
	        msrc: require('@/assets/image/v1/bid/state.jpg'),
	        src: require('@/assets/image/v1/bid/state.jpg'),
	        w: 640,
	        h: 1136
	      }],
	      options: {
	        getThumbBoundsFn(index) {
	          // find thumbnail element
	          const thumbnail = document.querySelectorAll('.state-img')[index]
	          // get window scroll Y
	          const pageYScroll = window.pageYOffset || document.documentElement.scrollTop
	          // optionally get horizontal scroll
	          // get position of element relative to viewport
	          const rect = thumbnail.getBoundingClientRect()
	          // w = width
	          return {
	            x: rect.left,
	            y: rect.top + pageYScroll,
	            w: rect.width
	          }
	        }
	      }
	    }
	  },
	  components: {
	    Previewer
	  },
	  methods: {
	    logIndexChange(arg) {
	      console.log(arg)
	    },
	    show(index) {
	      this.$refs.previewer.show(index)
	    }
	  }
	}
</script>

<style scoped>
	@import '../../styles/util.css';
	.page {
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.img {
		margin-top: 46px;
		height: 100%;
	}

	.state-img {
		width: 100%;
		height: 100%;
	}
</style>
